import { Button, Form, Input, Popconfirm, Table, Modal, Select, message } from 'antd'
import React, { useEffect, useState } from 'react'
import '../subject/course.scss'
import { http } from '../../utils'
import { useStore } from '../../store'

//弹出框
const CollectionCreateForm = ({ open, onCreate, onCancel }) => {
  const [form] = Form.useForm()
  const { userInforStore, subjectStore } = useStore()
  useEffect(() => {
    userInforStore.getUserInfor()
    subjectStore.getSubjectList()
  }, [userInforStore, subjectStore])

  const onOk = () => {
    form
      .validateFields()
      .then((values) => {
        form.resetFields()
        onCreate(values)
      })
      .catch((info) => {
        console.log('Validate Failed:', info)
      })
  }
  //选择器
  const { Option } = Select
  const handleChange = (value) => {
    // console.log(value) // { value: "lucy", key: "lucy", label: "Lucy (101)" }
  }
  //
  return (
    <Modal
      open={open}
      title="创建新课程(注意同一学科现不允许开启多个课程)"
      okText="Create"
      cancelText="Cancel"
      onCancel={onCancel}
      onOk={onOk}
    >
      <Form
        form={form}
        layout="vertical"
        name="form_in_modal"
        initialValues={{
          modifier: 'public',
        }}
        defaultValue={{
          value: 'lucy',
          label: 'Lucy (101)',
        }}
      >

        <Form.Item name="description" label="课程详情">
          <Input type="textarea" />
        </Form.Item>
        <Form.Item name="courseType" label="课程类型">
          <Select
            labelInValue
            style={{
              width: 120,
            }}
            onChange={handleChange}
          >
            {subjectStore.subjectList.map((item) => (<Option value={item.id} key={item.id} >{item.course_name}</Option>))}
          </Select>
        </Form.Item>
        <Form.Item name="modifier" className="collection-create-form_last-form-item">
          <span className='userInfor-name'>任课教师:{userInforStore.userInfor.real_name}</span>
        </Form.Item>
      </Form>
    </Modal>
  )
}
//
function Course () {
  //弹出框
  const [open, setOpen] = useState(false)
  const [confirmLoading, setConfirmLoading] = useState(false)

  //课程详情好像不能加
  const onCreate = async (values) => { //创建课程操作
    console.log('Received values of form: ', values)
    try {
      await http.post(`/base_server/api/v1/pub/course/add${'?subject_id='}${values.courseType.key}&${'description='}${values.description}`)// eslint-disable-line no-unused-vars
      message.success('添加成功')
      console.log('添加成功')
      setConfirmLoading(true)
      setTimeout(() => {
        setOpen(false)
        setConfirmLoading(false)
      }, 2000)
    } catch (e) {
      message.error(e.response?.data?.message || '添加失败')
    }
  }

  //
  const [dataSource, setDataSource] = useState()
  const loadCourseList = async () => { //获取课程信息
    const res = await http.get('/base_server/api/v1/pub/course/list/all')
    setDataSource(res.data)
  }
  useEffect(() => {
    loadCourseList()
  }, [])// eslint-disable-line
  const handleDelete = (id) => {
    const newData = dataSource.filter((item) => item.id !== id)
    setDataSource(newData)
  }

  const columns = [
    {
      title: '学科名',
      dataIndex: 'subject_name',
      width: '20%',

    },
    {
      title: '课程状态',
      dataIndex: 'status',
      render: function (text, record, index) {
        if (text === 1) {
          return (
            <div style={{ color: 'blue' }}>授课中</div>
          )
        }
      }
    },
    {
      title: '课程详情',
      dataIndex: 'description',
    },
    {
      title: '课程创建日期',
      dataIndex: 'create_time',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record) =>
        dataSource.length >= 1 ? (
          <Popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        ) : null,
    },
  ]
  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setOpen(true)
        }}
      >
        开新课
      </Button>
      <CollectionCreateForm
        open={open}
        onCreate={onCreate}
        confirmLoading={confirmLoading}
        onCancel={() => {
          setOpen(false)
        }}
      />
      <Table
        rowClassName={() => 'editable-row'} //表格行的类名
        dataSource={dataSource}
        columns={columns}
        rowKey={(dataSource) => dataSource.id}

      />
    </div>
  )
};

export default Course